<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <link rel="stylesheet" type="text/css" href="../css/webuploader.css">
    <style>
        #upload-container, #upload-list {
            width: 500px;
            margin: 0 auto;
        }

        #upload-container {
            cursor: pointer;
            border-radius: 15px;
            background: #EEEFFF;
            height: 200px;
        }

        #upload-list {
            height: 100px;
            border: 1px solid #EEE;
            border-radius: 5px;
            margin-top: 10px;
            padding: 10px 20px;
        }

        #upload-container > span {
            widows: 100%;
            text-align: center;
            color: gray;
            display: block;
            padding-top: 15%;
        }

        .upload-item {
            margin-top: 5px;
            padding-bottom: 5px;
            border-bottom: 1px dashed gray;
        }

        .percentage {
            height: 5px;
            background: green;
        }

        .btn-delete, .btn-retry {
            cursor: pointer;
            color: gray;
        }

        .btn-delete:hover {
            color: orange;
        }

        .btn-retry:hover {
            color: green;
        }
    </style>

</head>
<div class="layui-upload-drag" id="file" style="display: none">
    <div id="upload-container">
        <span>点击或将文件拖拽至此上传</span>
    </div>
    <div id="upload-list">
    </div>
    <button id="picker" style="display: none;">点击上传文件</button>
</div>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" autocomplete="off" class="layui-input" id="name">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">学号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="studentNumber" autocomplete="off" class="layui-input" id="studentNumber">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" name="email" autocomplete="off" class="layui-input" id="email">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-search-btn"><i class="layui-icon"></i>
                                搜 索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>

                        </div>
                    </div>
                </form>
            </div>
        </fieldset>


        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button type="button" class="layui-btn layui-btn-sm" id="upExcel">
                    <i class="layui-icon">&#xe67c;</i>批量添加用户
                </button>`
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="temp">excel模板</button>
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add">添加成员</button>
            </div>

        </script>
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">移出</a>
        </script>


    </div>
</div>
<script type="text/html" id="status">
    {{#  if(d.isOpenEmail === 0 ){ }}
    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">未开通</button>
    {{#  } }}
    {{#  if(d.isOpenEmail === 1 ){ }}
    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">已开通</button>
    {{#  } }}
</script>
<script src="../../lib/layui-v2.7.3/layui/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../../js/webuploader.js"></script>
<script src="../../api/urlConfig.js"></script>

<script>


    var tId;
    function child(obj) {
        tId = obj.id;
        var upViewIndex = null;
        layui.use(['form', 'table', 'dropdown'], function () {

            var $ = layui.jquery,
                form = layui.form,
                table = layui.table
            ;

            // 录入用户信息
            layui.use('upload', function(){
                var upload = layui.upload;

                //执行实例
                var uploadInst = upload.render({
                    elem: '#upExcel' //绑定元素
                    ,url: ipURL+'/caption/team/batchUser/'+tId //上传接口
                    ,method:'post'
                    ,accept:'file'
                    ,headers:{token:localStorage.token}
                    ,data:{
                        file:upload,
                    }
                    ,done: function(res){
                        if(res.state){
                            layer.msg(res.message);
                            console.log("123")
                            layui.table.reload('currentTableId'); //重载父页表格，参数为表格ID
                        }else{
                            layer.msg(res.message);
                        }
                        //刷新表格，参数为表格ID
                        //上传完毕回调
                    }
                    ,error: function(){
                        layer.msg(res.message+"请刷新页面");
                        //请求异常回调
                    }
                });
            });


            table.render({
                elem: '#test-dropdown-table',
                url:ipURL+"/temp"
                ,title: '用户数据表'
                ,cellMinWidth: 80
                ,cols: [[
                    ,{field:'userName', title:'姓名'}
                    ,{field:'email', title:'邮箱',width:200}
                    ,{field:'studentNumber', title:'学号',width:200}
                ]]
            });

            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {

                var userName = $('input[name="name"]').val()
                var email = $('input[name="email"]').val()
                var studentNumber = $('input[name="studentNumber"]').val()
                //执行搜索重载
                table.reload('currentTableId', {

                    page: {
                        curr: 1
                    },
                    where: {
                        userName: userName,
                        email: email,
                        studentNumber:studentNumber,
                    }
                });

                return false;
            });


            table.render({
                elem: '#currentTableId',
                // url: '../api/table.json',
                url: ipURL + "/caption/team/user/page/" + obj.id,
                headers: {token: localStorage.token},
                parseData: function (res) { //res 即为原始返回的数据

                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data.data, //解析数据列表

                    };

                },

                response: {
                    statusCode: 0 //规定成功的状态码，默认：0
                },
                text: {
                    none: '无数据'
                },
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [
                    [{
                        type: "checkbox",
                        width: 50
                    },
                        {
                            field: 'id',
                            title: 'ID',
                            width: 80,
                            hide:true
                        },
                        {
                            field: 'name',
                            title: '昵称',
                            width: 100,
                            align:'center'
                        },
                        {
                            field: 'studentNumber',
                            title: '学号',
                            width: 200,
                            align:'center'
                        },
                        {
                            field: 'email',
                            title: '邮箱',
                            width: 200,
                            align:'center'

                        },

                        {
                            title: '操作',
                            minWidth: 200,
                            toolbar: '#currentTableBar',
                            align: "center"
                        }
                    ]
                ],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });


            /**
             * toolbar监听事件
             */
            table.on('toolbar(currentTableFilter)', function (obj) {

                if(obj.event === 'temp'){
                    layer.open({
                        type: 1,
                        title: '提示:1.邮箱和学号是可选(必须存在一个)2.密码默认是学号,学号不存在密码是邮箱',
                        area: ['700px', '300px'],

                        content: $('#userTemp'),
                        btn: ['提交', '退出'],
                        end:function(){
                            $('#userTemp').css('display','none')
                        },
                        yes:function(){
                        },
                    })
                }
                else if (obj.event ==='add'){
                    // 清空表单
                    form.val("stuform", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                        "email": '' // "name": "value"
                    });
                    layer.open({
                        type: 1,
                        title: '添加成员(用户不存在则密码是学号)',
                        area: ['450px', '400px'],

                        content: $('#save'),
                        btn: ['提交', '退出'],
                        end:function(){
                            $('#save').css('display','none')
                        },
                        yes:function(){
                        },

                        success:function(layero,index){

                            layui.use('form',function(){
                                var form=layui.form;
                                layero.addClass('layui-form');
                                var submitBtn=layero.find('.layui-layer-btn0');
                                submitBtn.attr('lay-filter','formVerify').attr('lay-submit','');
                                layero.keydown(function(e){
                                    if(e.keyCode==13){
                                        submitBtn.click();
                                    }
                                });

                                form.on('submit(formVerify)',function(data){

                                    $.ajax({
                                        url: ipURL + '/caption/team/addUser/'+tId,
                                        method: 'post',
                                        data: JSON.stringify(data.field),
                                        dataType: 'JSON',
                                        contentType: 'application/json;charset=UTF-8',
                                        beforeSend: function (request) {
                                            request.setRequestHeader("token", localStorage.token);
                                        },
                                        success: function (res) {
                                            if (res.state){
                                                layer.msg(res.message);
                                                layer.close(index);
                                                layui.table.reload('currentTableId'); //重载父页表格，参数为表格ID
                                            }else{
                                                layer.msg(res.message);
                                            }

                                        },
                                        error: function (res) {
                                            layer.msg(res.message);
                                        }
                                    });


                                    return false;
                                });
                            });
                        }
                    })
                }


            });

            //监听表格复选框选择
            table.on('checkbox(currentTableFilter)', function (obj) {
            });

            table.on('tool(currentTableFilter)', function (obj) {
                var that = this;
                var data = obj.data;
                // 移出
                if (obj.event === 'delete') {
                    $.ajax({
                        url: ipURL + '/caption/team/deleteUser/'+data.id,
                        data:{teamId:tId},
                        method: 'delete',
                        beforeSend: function (request) {
                            request.setRequestHeader("token", localStorage.token);
                        },
                        success: function (res) {
                            if (res.state){
                                layer.msg(res.message);
                                table.reload('currentTableId'); //刷新表格，参数为表格ID
                            }else{
                                layer.msg(res.message);

                            }


                        },
                        error: function (data) {
                            layer.msg(res.message);
                        }
                    });
                }
            });

        });

    };

</script>
</body>
<style type="text/css">
</style>
<div style="max-width: 728px; display: none" id="userTemp" >
    <table class="layui-hide" id="test-dropdown-table" lay-filter="test-dropdown-table"></table>
</div>

<form class="layui-form myData" action="save" method="post" lay-filter="stuform" id="save" style="display: none">
    <input type="hidden" name="id"  />
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱(可选):</label>
        <div class="layui-input-block">
            <input type="text" name="email"  class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">学号:</label>
        <div class="layui-input-block">
            <input type="text" name="studentNumber" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">昵称:</label>
        <div class="layui-input-block">
            <input type="text" name="name" class="layui-input" />
        </div>
    </div>

</form>
</html>
